<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv = "X-UA-Compatible" content ="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit"/>
<title>火炬接力</title>
<meta content="" name="Keywords">
<meta content="" name="Description">

<style>

html,body{ overflow:hidden; position:absolute; left:0; top:0; width:100%; height:100%; background:#093;}

/*水泡*/
.icon-bubble{ position:absolute; width:10%; padding-top:10%; border-radius:50%; background:rgba(255,255,255,0.8); opacity:0;}
.icon-bubble1{ left:20%; }
.icon-bubble2{ left:30%;}
.icon-bubble3{ left:40%;}
.icon-bubble4{ left:50%;}
.icon-bubble5{ left:60%;}
.icon-bubble6{ left:70%;}
/*@-webkit-keyframes bubbleTranslate{
		0%{-webkit-transform: translate3d(0,120%, 0);transform: translate3d(0,120%, 0);opacity:0}
		100%{-webkit-transform: translate3d(0,-120%, 0);transform: translate3d(0,-120%, 0);opacity:1}
}*/
@keyframes bubbleTranslate{
	0%{top:120%;opacity:0}
	100%{top:-100%;opacity:1}
}
.icon-bubble1{animation:bubbleTranslate/*name*/ 6s/*持续的时间*/ infinite/*要重复几次*/ linear/*使用的时间曲线*/ 1s/*开始动画之前的延时*/ alternate/*方向*/}
.icon-bubble2{animation:bubbleTranslate 6s infinite linear 3s}
.icon-bubble3{animation:bubbleTranslate 6s infinite linear 2s}
.icon-bubble4{animation:bubbleTranslate 6s infinite linear 0.5s}
.icon-bubble5{animation:bubbleTranslate 6s infinite linear 2.5s}
.icon-bubble6{animation:bubbleTranslate 6s infinite linear 1.5s}

</style>
</head>

<body>


<i class="icon-bubble1 icon-bubble">1</i>
<i class="icon-bubble2 icon-bubble">2</i>
<i class="icon-bubble3 icon-bubble">3</i>
<i class="icon-bubble4 icon-bubble">4</i>
<i class="icon-bubble5 icon-bubble">5</i>
<i class="icon-bubble6 icon-bubble">6</i>


</body>
</html>
